<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <title>注册用户</title>
</head>
<body>

<div id="app">
    <el-form :inline="true" :model="user" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-input v-model="user.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="user.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="user.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
        </el-form-item>
    </el-form>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                websocketPath:'ws://localhost:8090/websocket/registerUser',
                ws:null,
                user:{
                    username:'',
                    password:'',
                    name:'',
                }
            }
        },
        mounted(){
            this.ws=new WebSocket(this.websocketPath);//创建websocket对象
            this.ws.onopen=this.open;
            this.ws.onmessage=this.getMessage;
            this.ws.onclose=this.close;
        },
        methods:{
            open:function (){
                console.log("前端打开后台连接");
                this.ws.send("我从前端来");
            },
            close:function (){
                console.log("前端关闭后台连接");
            },
            getMessage:function (event){
                this.$message({
                    message: event.data,
                    type: 'success'
                });
            },
            onSubmit() {
                let _this=this;
                axios.put('http://localhost:8090/api/user/addUser',_this.user)
                    .then(function (response) {
                        _this.$message({
                            message: '用户注册成功',
                            type: 'success'
                        });
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>

</body>
</html>